<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
    <title></title>
</head>
<body onload="init()">
<canvas id="mainCanvas" width="400px" height="300px"></canvas>
<script src="//cdn.bootcss.com/three.js/r83/three.min.js"></script>
<script src="../lib/stats.js/build/stats.min.js"></script>

<script type="text/javascript">
    var scene = null;
    var camera = null;
    var renderer = null;

    var mesh = null;
    var id = null;
    var stat = null;

    function init() {
        stat = new Stats();
        stat.domElement.style.position = 'absolute';
        stat.domElement.style.right = '10px';
        stat.domElement.style.top = '310px';
        document.body.appendChild(stat.domElement);

        renderer = new THREE.WebGLRenderer({
            canvas: document.getElementById('mainCanvas')      //绑定数据
        });
        renderer.setClearColor(0x000000);
        scene = new THREE.Scene();      //实例化场景

        camera = new THREE.OrthographicCamera(-5, 5, 3.75, -3.75, 0.1, 100);  //实例化相机 加入属性 并添加场景中
        camera.position.set(5, 5, 20);
        camera.lookAt(new THREE.Vector3(0, 0, 0));
        scene.add(camera);

        mesh = new THREE.Mesh(new THREE.CubeGeometry(1, 2, 3),        //绘制立方体    加入材质  并且加入到场景中
            new THREE.MeshLambertMaterial({
                color: 0xffff00
            }));
        scene.add(mesh);

        var light = new THREE.DirectionalLight(0xffffff);               //实例化光照   加入到场景中
        light.position.set(20, 10, 5);
        scene.add(light);

        //id = setInterval(draw, 20);  //定时执行函数
        id = requestAnimationFrame(draw);
    }

    function draw() {
        stat.begin();
        mesh.rotation.y = (mesh.rotation.y + 0.01) % (Math.PI * 2);     //修改缩放
        renderer.render(scene, camera);             //重绘制立方体
        id = requestAnimationFrame(draw);
        stat.end();
    }

    function stop() {
        if (id !== null) {
            clearInterval(id);
            id = null;
        }
    }


</script>
</body>

</html>
<!--
    

-->